<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>新建提醒</title>
    <script src="../js/jquery-2.1.4.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/cw.css"/>
    <script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
    <script type="text/javascript" src="../js/public.js" ></script>
    <script type="text/javascript" src="../js/app/me-remind-bianji.js" ></script>
    <script type="text/javascript" charset="UTF-8">
      	mui.init();
    </script>
    <style type="text/css">
   		.mui-dtpicker{position:relative;z-index:0;}  
   		.corporeity-btn{padding:0px;} 
   		.mui-checkbox input[type=checkbox]:checked:before{color:#8dc21f;}
   		.mui-switch.mui-active {border-color:#8dc21f;background-color:#8dc21f;}
   		.mui-dtpicker{z-index: 1;}
   		body,html{height:715px !important;overflow: hidden;}
    </style>
   
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title ">编辑提醒</h1>
		<span class="mui-pull-right overWarn"style="line-height:44px;">完成</span>
	</header> 
	<div id="content" class="mui-content"></div>
	<div class="mui-table-view mui-table-view-cell ">
		<a href="#chiyao3">
			<div class="mui-navigate-right">
				<li>重复</li>
				<li class="mui-h6 " id="week">选择星期</li>
			</div>
		</a>
	</div>
	<div class="mui-table-view table-view-cell bell">
		<div class="mui-navigate-right">
			<li>铃声</li>
			<li class="mui-h6 lingsheng">默认铃声</li>
		</div>
	</div>
	<div class="mui-table-view table-view-cell ">
		<div class="">
			<li>震动
				<div class="mui-switch mui-switch-mini mui-pull-right zhendong">
					<div class="mui-switch-handle"></div>
				</div>
			</li>
			<li class="mui-h6 shock">震动</li>
		</div>
	</div>
	<div class="mui-table-view mui-table-view-cell ">
		<a href="#chiyao">
			<div class="mui-navigate-right">
				<li>吃药注意事项</li>
				<li class="mui-h6 cpill">备注</li>
			</div>
		</a>
	</div>
	<div class="mui-table-view mui-table-view-cell ">
		<a href="#chiyao2">
			<div class="mui-navigate-right">
				<li>家庭人员注意事项</li>
				<li class="mui-h6 fpill">备注</li>
			</div>
		</a>
	</div>
	<div class="mui-h5 remind-list-time"><!--2小时31分后响铃-->时间选择</div>
	<button id='demo5' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block"style="display: none;">选择时间 ...</button>
	<div id="chiyao" class="mui-popover mui-popover-bottom mui-popover-action"> 
		<div class="table-view-cell background remind-bottom-1">
			<div class="mui-text-center">吃药注意事项</div>
			<textarea name="" rows="1" cols=""placeholder="请输入吃药注意事项" class="cpills"></textarea>
		<div class="overflow-h doctor-nav corporeity-btn ">
			<a href="#chiyao">
				<button class="background-y mui-btn mui-btn-block mui-pull-left">取消</button>
				<button class="background-y mui-btn mui-btn-block mui-pull-right csure">确定</button>
			</a>
		</div>
		</div>
	</div>	
	<div id="chiyao2" class="mui-popover mui-popover-bottom mui-popover-action"> 
		<div class="table-view-cell background remind-bottom-1">
			<div class="mui-text-center">家庭成员注意事项</div>
			<textarea name="" rows="1" cols=""placeholder="请输入家庭成员注意事项" class="fpills"></textarea>
		<div class="overflow-h doctor-nav corporeity-btn">
			<a href="#chiyao2">
				<button class="background-y mui-btn mui-btn-block mui-pull-left">取消</button>
				<button class="background-y mui-btn mui-btn-block mui-pull-right fsure" >确定</button>
			</a>
		</div>
		</div>
	</div>	
	<div id="chiyao3" class="mui-popover mui-popover-bottom mui-popover-action"> 
		<div class="background remind-bottom-1 ">
			<div class="mui-text-center border-bottom-1 table-view-cell">
				<span style="padding-top: 8px;display: inline-block;">重复</span>
				<div class="mui-switch mui-switch-mini mui-pull-right chongfu">
					<div class="mui-switch-handle"></div>
				</div>
			</div>
			<div class="">
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label class="xue">星期一</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label class="xue">星期二</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label class="xue">星期三</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label class="xue">星期四</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label class="xue">星期五</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label class="xue">星期六</label>
					<input name="radio1" type="checkbox">
				</div>
				<div class="table-view-cell mui-checkbox border-bottom-1">
					<label class="xue">星期日</label>
					<input name="radio1" type="checkbox">
				</div>
			</div>
			
		<div class="overflow-h doctor-nav corporeity-btn wek" style="margin:0px 15px;padding-bottom: 11px;">
			<span>
				<a href="#chiyao3">
					<button class="background-y mui-btn mui-btn-block mui-pull-left">取消</button>
				</a>
			</span>
			<span class="we">
				<a href="#chiyao3">
					<button class="background-y mui-btn mui-btn-block mui-pull-right">确定</button>
				</a>
			</span>
		</div>
		</div>
	</div>
	<span class="hours" style="display: none;"></span>
	<span class="minutes" style="display: none;"></span>
</body>

<script src="../js/mui.picker.min1.js"></script>
<script>
	var h, m, tt;
	(function($) {
		$.init();
		var result = $('.remind-list-time')[0];
		var aaa = $('.hours')[0];
		var bbb = $('.minutes')[0];
		var btns = $('.btn');
		btns.each(function(i, btn) {
			var optionsJson = this.getAttribute('data-options') || '{}';
			var options = JSON.parse(optionsJson);
			var id = this.getAttribute('id');
			var picker = new $.DtPicker(options);
			picker.show(function(rs) {
				h = rs.text1;
				m = rs.text2;
				changeTime(rs.text1,rs.text2);//获得倒计时时间
				console.log(h+" "+m);
			});
		});
	})(mui);
	//
function changeTime(hhh,mmm){
	console.log(hhh+' '+mmm+" "+h+" "+m);
	if(!hhh)hhh = h;
	if(!mmm)mmm = m;
	//获取当前 时 分
	var d = new Date(); //实例一个时间对象；
	var h = parseInt(d.getHours()); //获取系统时，
	var m = parseInt(d.getMinutes()); //分
	var w = parseInt(d.getDay());//星期
	switch(w){
		case 0:wk = '星期日';break;
		case 1:wk = '星期一';break;
		case 2:wk = '星期二';break;
		case 3:wk = '星期三';break;
		case 4:wk = '星期四';break;
		case 5:wk = '星期五';break;
		case 6:wk = '星期六';break; 
	}
	var ntime = (h*60) + m//现在总分钟
	var ttime = (parseInt(hhh)*60) + parseInt(mmm)//总分钟
	var jtime = ttime - ntime;//相减的分钟数
	var xingqi = $('#week').text();//用户点击的星期
	console.log(jtime+" "+xingqi);
	
	if(w == 0)w=7;//w当天星期数
	console.log(w+" "+vk);
	var tian = 0;
	
	var x = [];//用户选的星期数组
	if(xingqi != '选择星期'){
		var ww = xingqi.split(' '); //用户点击的星期-》用空格隔开  
		for(var i = 0; i < ww.length -1; i++){ 
			switch(ww[i]){
				case '星期日':vk = 0;x.push(vk);break;//vk星期数
				case '星期一':vk = 1;x.push(vk);break;
				case '星期二':vk = 2;x.push(vk);break;
				case '星期三':vk = 3;x.push(vk);break;
				case '星期四':vk = 4;x.push(vk);break;
				case '星期五':vk = 5;x.push(vk);break;
				case '星期六':vk = 6;x.push(vk);break;
			}
		}
		for(var i=0;i<x.length;i++){
			console.log(x[i]);
			if(x[i] == w){
				if(jtime < 0){
					/**
					 * 有今天，但是时间已经过了
					 * 在原有的基础上减1天
					 */
					tian = 7 - w + x[i];
				}else{
					tian = 0;
				}
				break;
			}else if(x[i] > w){
				tian = x[i] - w;//相差几天
				break;
			}else if(x[i] < w){
				tian = 7 - w +x[i]; 
//				break;
			}
			if(!x[i+1]){ 
//				x[i] = x[0];
				tian = 7 - w +x[0];break;
			}//若是最后一个则返回第一个
        }
		
		console.log(w+" "+tian);
		//如果tian等于0代表只选了今天，而且时间已过
		var next_sz = tian != '0'?(tian - 1) * 60 * 24 + ( 24 * 60 - ntime) + ttime:(7 - 1) * 60 * 24 + ( 24 * 60 - ntime) + ttime;
		console.log(tian+" "+next_sz);
		//先求天  
		var s_day = parseInt(next_sz/60/24);
		//再求时
		var sc = (next_sz -  s_day * 60 *24)/60;
		var s_hour = parseInt(sc); 
		//最后求分钟
		var s_minute = next_sz - parseInt(s_day * 60 *24) - (parseInt((next_sz -  s_day * 60 *24)/60) * 60);
		console.log(s_day+" "+s_hour+" "+s_minute); 
		
		if(wk == ww[i]){//当星期有符合该条提醒的星期
			if(jtime == 0){//今天的时间和用户时间一致，也就是时间到了，则提醒
				var mm = '0天0小时0分钟';
//				plus.device.vibrate(1000);//震动 
//				var mm = '提醒中';
//				clearInterval(cc);
//				cc = setInterval(Countdown,60000);
			}else if(jtime < 0){//时间已过 
				mm = s_day + "天" + s_hour + "小时" + s_minute + "分";
			}else if(jtime > 0){
				//今日响铃还未到
				mm = jtime/60 >= 1?parseInt(jtime/60)+'小时'+(jtime - (parseInt(jtime/60)*60))+'分钟后响铃':'0小时'+jtime+"分钟后响铃";
			}
		}else{
			mm = s_day + "天" + s_hour + "小时" + s_minute + "分"; 
//			console.log('时间到了，但不是当天');
		}
	}
//	clearInterval(cc); 
//	console.log(mm);
//	if(mm == '0天0小时0分钟'){
//		mm = '提醒中';
//		plus.device.vibrate(2000);//震动时长
//		plus.device.beep(2);//蜂鸣
//		plus.device.setWakelock( true );//亮屏
//		clearInterval(tt); 
//		tt = setInterval(warnList,60000);
//	}
	$('.remind-list-time').text(mm);
	$('.hours').text(hhh);
	$('.minutes').text(mmm);
}

</script>
<script type="text/javascript"> 
	$(".mui-backdrop").remove();
	$(".mui-dtpicker").on("tap",function(){
		$("body,html").animate({scrollTop:100},500);
	})
	$(".mui-dtpicker-header > button:eq(0)").css({"opacity":0}).attr({"disabled":"disabled"});
	mui.back = function() {
		plus.webview.currentWebview().close();
	};
</script>

</html>